Create a 3D Animated Website Using HTML, CSS & JS | Scrolling Animations with Canvas

Sheryians Coding School

247K subscribers

147K views 6 months ago Website design with HTML, CSS and Javascript

Source Code & Images Link: https://github.com/aadilkhan08/Magma.git Learn how to create an impressive 3D animated website using HTML, CSS, and JS! Follow this step-by-step tutorial to build a captivating website inspired by the Magma Awwwards design, incorpo

…

...more

...more

464 Comments

Add a comment...

@techbhatt893

Thank you so much for this project Sir, please teach us some more modern website development by creating similar projects.

@tapashmazumdar8319

Thank You so much Sir for bringing such content for us please. I beg of you to bring more of these in terms of mordern web development with great animations which will blew our mind and GSAP too

@user-gy1vz6hn9j

This video was also Awesome, The efforts you have put in will definitely help us a lot, Thank you so much for this great content.

@jagggyjazz8010

3 months ago (edited)

One of the most Under rated youtube channels out there. Great work Harsh and co you guys deserve to be successful. Good luck

@pratikbankar4757

This is by far the best web development learning platform. It's awesome that you guys are teaching us what's actually going to matter in the future.

@_anujKaushik_

From that game changer video of your, I came to know about this channel and I've never thought that we can make these types of websites. Thank you so much bhaiya I literally loving your content and your modern gurukul system. P.S. waiting for web development competition which you announced ;)

@aasthachaudhary8624

Seen so many web dev/coding channel. This is so far the best out there. I don't really comment on youtube videos but you guys deserve all the likes. Thanks for making such content.

@rajeshsingha6921

Love the way you teach sir, i enjoyed the whole video, keep teaching like like this

️

@danherzl

Eu amo isso! Vocês são incríveis! Abraço do Brasil! tks

@finnysabu520

Amazing video. Created the one which sarthak taught. Now on progress with this. Thanks Sheriyans for teaching such Jawdropping concepts. Guys I have one request. Can you please guide me to the website from which I can download such images which have been used inside canvas in this project if there is any.

@ritujsrivastava2037

Thanks for the super helpful content. Keep going guys. Your videos are helping me alot and I really really appreciate your hardwork. Thanks Again.

@Arman-df4wo

1 month ago (edited)

this is an amazing project for learning i learned a lot of new things like canvas and text animation as for feedback: it could have better if you have used utilities classes and id for the sake of no repetition of code like we were using height width position and flex align items justify-content flex-direction background-color color padding and function for text animation we were using

@Amit-bd1uo

I really like your work, and I also have a question regarding locomotive and canvas, when we use them together and try to zoom in on a web page, when we zoom in, the page up gets scrolled and when we zoom out the page gets scrolled down. this is not a good thing for our web page. Please give any solution how can i use them as well to be able to zoom my web page normally Thanks

@harshranjan6045

Really appreciate the efforts you all putting. keep Rising and shinning

@MyCodingDiarie

I learned so much from this video. Thank you for sharing your knowledge with us!

@mrhuzaifayt8775

THANKS YOU SHERYIAN CODING SCHOOL I REALY APPRECIATE THE WAY YOU EXPLAIN THINGS IN YOUR VIDEO. I ALWAYS FEEL LIKE WHAT YOU ARE SAYING EVEN IT IS A COMPLEX TOPIC I'M SO GLAD I FOUND YOUR CHANNEL! YOUR VIDEOS HAVE BEEN A LIFESAVER. THANK YOU FOR SHARING YOUR KNOWLEDGE WITH THE WORLD."

@ClashWithHuzaif

Absolutely amazing work by you guys.

@RahulPawar-pc2sy

Bhai you are amazing and also your content is very useful for today's youth.. Thanks for learning about awesome tricks for ui/ux such pretty effects... Thanks sheryians..

Read more

@princeking370

Great work sir we all need this type of videos

@avocode1487

Ohk got it, you took the gltf file, opened it blender and setup the default camera, and animation were already there, and generated jpeg sequence, generating sequence was a good move cause it would have been too overkill to animate gltf on scroll for this video. great stuff. keep going.

Yatin

Public

0/140

30.0 seconds

Continue clipping after ad finishes

Can’t create clip while ad is playing

Create a 3D Animated Website Using HTML, CSS & JS | Scrolling Animations with Canvas

Sheryians Coding School

6.3K

Likes

Jun 30

2023

Source Code & Images Link: https://github.com/aadilkhan08/Magma.git Learn how to create an impressive 3D animated website using HTML, CSS, and JS! Follow this step-by-step tutorial to build a captivating website inspired by the Magma Awwwards design, incorporating scrolling animations with Canvas. Instructor in this video: Aadil Khan Visit our website: https://sheryians.com/ Socials: Instagram: / sheryians_coding_school Facebook: / sheryians.community Telegram: https://t.me/sheryiansCommunity LinkedIn: / the-sheryians-coding-school Discord: / discord Peace ✌️ #3danimation #threejs #html #html5 #htmlcss #javascript #cssanimationtutorial #javascriptprojects #frontend #frontenddeveloper #frontendwebdeveloper

Featured playlist

Website design with HTML, CSS and Javascript

Sheryians Coding School

Sheryians Coding School

Coaching center

Sheryians Coding School

247K subscribers

🎙️[GAMECHANGER] FUTURE OF INDIAN WEB DEVELOPMENT 🚀 | Don't Miss Out! 🔥

by Sheryians Coding School

HTML Crash Course: Master the Essentials in One Video! Start Your Front-End Journey Today!

by Sheryians Coding School

CSS Crash Course: Master the Essentials in One Video! Elevate Your Front-End Skills Now!

by Sheryians Coding School

Create 3D Animations Using HTML, CSS & JS | Scrolling Animation Using Canvas

by Sheryians Coding School